<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link th:href="@{/static/bootstrap-5.1.3/css/bootstrap.min.css}" rel="stylesheet">

  <title>Cairo-登录</title>
</head>
<body>
<div id="login-container" style="width: 30rem;height: 20rem;margin: auto;border: 0 solid cornflowerblue">
  <nav class="nav nav-pills nav-justified">
    <a class="nav-item nav-link active" href="#">账号登录</a>
    <a class="nav-item nav-link disabled" href="#" aria-disabled="true">手机号登录</a>
    <a class="nav-item nav-link disabled" href="#" aria-disabled="true">扫码登录</a>
  </nav>

  <div id="account-container" style="width: 30rem;">
    <form class="form-signin" th:action="@{/login/password}" method="post">
      <div class="form-group" style="width: 20rem;margin: 0 auto;color: red"
           th:if="${session.SPRING_SECURITY_LAST_EXCEPTION != null} "
           th:text="${session.SPRING_SECURITY_LAST_EXCEPTION.message}">
      </div>
      <div class="form-group" style="width: 20rem;margin: 1rem auto">
        <label for="username" style="display:inline;">账号:&nbsp;</label>
        <input type="text" class="form-control" id="username" name="username" style="display:inline;width:17rem;"
               placeholder="手机号/邮箱/登录名"/>
      </div>
      <div class="form-group" style="width: 20rem;margin: 1rem auto">
        <label for="password" style="display:inline;">密码:&nbsp;</label>
        <input type="password" class="form-control" id="password" name="password" style="display:inline;width:17rem;"
               placeholder="密码"/>
      </div>
      <div class="form-group" style="width: 20rem;margin: 1rem auto">
        <label for="verify_code" style="display:inline;">校验码:&nbsp;</label>
        <input type="text" class="form-control" id="verify_code" name="verify_code" style="display:inline;width:8rem;"
               placeholder="校验码"/>
        &nbsp;&nbsp;<img th:src="@{/captcha}" id="captcha" style="width: 7rem;"/>
      </div>
      <div class="form-group" style="width: 20rem; height: 1rem; margin: 1rem auto">
        <label>
          <input type="checkbox" name="remember-me" value="true">&nbsp;自动登录
        </label>
        <a class="btn btn-link btn-blue" style="padding: 0 0.1rem" href="javascript:alert('别点了,没做');">忘记密码</a>
        <a class="btn btn-link btn-blue" style="padding: 0 0.1rem" href="javascript:alert('暂不开放公网用户注册');">注册</a>
      </div>
      <div class="form-group" style="width: 20rem; margin: 1rem auto">
        <button type="submit" class="btn btn-primary" style="width: 20rem;">登录</button>
      </div>
      <div class="form-group" style="width: 20rem;margin: 0 auto">
        <a class="btn btn-blue" style="padding: 0.2rem 0.1rem" th:href="@{/oauth2/authorization/wechat-web}" href="javascript:alert('wechat-web')">微信-网站</a>
        <a class="btn btn-blue" style="padding: 0.2rem 0.1rem" th:href="@{/oauth2/authorization/wechat-open}" href="javascript:alert('wechat-open')">微信内页</a>
        <a class="btn btn-blue" style="padding: 0.2rem 0.1rem" th:href="@{/oauth2/authorization/dingding}" href="javascript:alert('dingding');">钉钉</a>
        <a class="btn btn-blue" style="padding: 0.2rem 0.1rem" th:href="@{/oauth2/authorization/alipay}" href="javascript:alert('alipay');">支付宝</a>
        <a class="btn btn-blue" style="padding: 0.2rem 0.1rem" th:href="@{/oauth2/authorization/github}" href="javascript:alert('github');">Github</a>
      </div>
    </form>
  </div>
</div>

<script th:src="@{/static/jquery/jquery-3.6.0.js}"></script>
<script th:src="@{/static/bootstrap-5.1.3/js/bootstrap.js}"></script>
<script type="text/javascript">
  $(function () {
    $("#captcha").click(function () {
      $(this).attr("src", "/captcha?d" + new Date().getTime())
    })
  })
</script>
</body>
</html>
